import useConfig from "@/composables/useConfig";
import { SettingProps } from "@/type/type";
import { Button, Form, Select ,Input} from "antd";
import { useEffect, useState } from "react";
const { Option } = Select;

const Setting: React.FC<SettingProps> = (props:SettingProps) => {
  const {config,changeConfig} = props;
  // console.log("setting",deviceId)
  const [form] = Form.useForm();
  const [formData,setFormData] = useState();

  useEffect(() => {
    const getMedias = async () => {
      const medias = await navigator.mediaDevices.enumerateDevices();
      setMedias(medias.filter((item) => item.kind === "videoinput"));
    };
    getMedias();
  }, []);
  const [medias, setMedias] = useState<MediaDeviceInfo[]>();

  useEffect(() => {
    if (!medias) return;
    const myMedias = medias!;
    // console.log(myMedias);
  }, [medias]);


  const onFinish = (values: any) => {
    setFormData(values);
    changeConfig({...config,...values});
  };

  const deviceOptions = medias?.map(item=>(
    <Option key={item.deviceId} value={item.deviceId}>{item.label}</Option>
  ))
  return (
    <main style={{padding:"10px",overflow:"hidden",display:"flex",flexDirection:"column",gap:"1rem",backgroundColor:'#34495e',height:"100vh"}}>
      <h2 style={{color:"whitesmoke",textAlign:"center",fontSize:"1rem",marginBottom:"1rem",marginTop:"2rem"}}>参数设置</h2>
      <Form
        wrapperCol={{ span: 24 }}
        form={form}
        name="control-hooks"
        onFinish={onFinish}
      >
        <Form.Item 
            initialValue={config.deviceId}
        name="deviceId" wrapperCol={{offset: 0, span: 24}} rules={[{required:true,message:"请选择摄像头"}]}>

          <Select
            placeholder="Select a option and change input text above"
            allowClear
          >
            {deviceOptions}
          </Select>
        </Form.Item>

        <Form.Item 
            initialValue={config.border}
        name="border" wrapperCol={{offset: 0, span: 24}} >
            <Input placeholder="Basic usage" />
        </Form.Item>
        <Form.Item 
            initialValue={config.color}
        name="color" wrapperCol={{offset: 0, span: 24}}>
            <Input placeholder="Basic usage" />
        </Form.Item>
        <Form.Item wrapperCol={{offset: 12, span: 24}} >
            <Button  type="primary" htmlType="submit" style={{transform:"translateX(-50%)",width:"100%"}}>
            保存
            </Button>
        </Form.Item>
        
      </Form>
    </main>
  );
};

export default Setting;
